<template>
  <div class="search-container">
    <el-select v-model.lazy="value " placeholder="Select" id="elselect">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
      />
    </el-select>
    <input
      type="text"
      v-model.lazy="searchQuery"
      placeholder="请输入搜索内容"
      @keyup.enter="search"
    />
    <button @click="search">搜索</button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      searchQuery: "",
      value: "",
      options: [
        {
          value: "Advertising",
          label: "Advertising",
        },
        {
          value: "Artificial Intelligence_Machine Learning",
          label: "Artificial Intelligence_Machine Learning",
        },
        {
          value: "Business Software",
          label: "Business Software",
        },
        {
          value: "Business",
          label: "Business",
        },
        {
          value: "Commerce",
          label: "Commerce",
        },
        {
          value: "Communication",
          label: "Communication",
        },
        {
          value: "Cryptography",
          label: "Cryptography",
        },
        {
          value: "Cybersecurity",
          label: "Cybersecurity",
        },
        {
          value: "Data",
          label: "Data",
        },
        {
          value: "Database",
          label: "Database",
        },
        {
          value: "Devices",
          label: "Devices",
        },
        {
          value: "eCommerce",
          label: "eCommerce",
        },
        {
          value: "Education",
          label: "Education",
        },
        {
          value: "Email",
          label: "Email",
        },
        {
          value: "Energy",
          label: "Energy",
        },
        {
          value: "Entertainment",
          label: "Entertainment",
        },
        {
          value: "Events",
          label: "Events",
        },
        {
          value: "Finance",
          label: "Finance",
        },
        {
          value: "Financial",
          label: "Financial",
        },
        {
          value: "Food",
          label: "Food",
        },
        {
          value: "Gaming",
          label: "Gaming",
        },
        {
          value: "Health and Fitness",
          label: "Health and Fitness",
        },
        {
          value: "Jobs",
          label: "Jobs",
        },
        {
          value: "Location",
          label: "Location",
        },
        {
          value: "Logistics",
          label: "Logistics",
        },
        {
          value: "Mapping",
          label: "Mapping",
        },
        {
          value: "Media",
          label: "Media",
        },
        {
          value: "Medical",
          label: "Medical",
        },
        {
          value: "Monitoring",
          label: "Monitoring",
        },
        {
          value: "Movies",
          label: "Movies",
        },
        {
          value: "News, Media",
          label: "News, Media",
        },
        {
          value: "Other",
          label: "Other",
        },
        {
          value: "Payments",
          label: "Payments",
        },
        {
          value: "Reward",
          label: "Reward",
        },
        {
          value: "Science",
          label: "Science",
        },
        {
          value: "Search",
          label: "Search",
        },
        {
          value: "SMS",
          label: "SMS",
        },
        {
          value: "Social",
          label: "Social",
        },
        {
          value: "Sports",
          label: "Sports",
        },
        {
          value: "Storage",
          label: "Storage",
        },
        {
          value: "Text Analysis",
          label: "Text Analysis",
        },
        {
          value: "Tools",
          label: "Tools",
        },
        {
          value: "Translation",
          label: "Translation",
        },
        {
          value: "Travel",
          label: "Travel",
        },
        {
          value: "Video, Images",
          label: "Video, Images",
        },
        {
          value: "Visual Recognition",
          label: "Visual Recognition",
        },
        {
          value: "Weather",
          label: "Weather",
        },
      ],
    };
  },
  watch:{
    value(newValue,oldValue){
      this.$emit("categoryChange",newValue)
    },
    searchQuery(newValue,oldValue){
      this.$emit("searchQueryChange",newValue)
    }
  },
  methods: {
    search() {
      this.$emit("clickSearch", this.searchQuery,this.value);
    },
  },
  
};
</script>

<style>
.search-container {
  text-align: center;
  margin-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

select {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px 0 0 5px;
  cursor: pointer;
}

input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 0;
  width: 300px;
  height: 20px;
}

button {
  padding: 10px 20px;
  background-color: #3385ff;
  color: #fff;
  border: none;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  height: 40px;
}
#elselect {
  height: 40px;
}
</style>